<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.导入vue 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<!-- 2.定义标签 需要给一个标签添加 id -->
<div id="app">
    <span>{{message}}</span>
    <button v-on:click="login">登录</button><br>
    <a href="javsscript:;" @click="register">注册</a>     <!-- v-on: 简写: '@' -->
    <hr>
    <button @click="add(count)">点击+1</button>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
    var vm = new Vue({
        // 元素
        el: "#app",
        // 数据
        data: {
            message: 'hello',
            count: 1,
            total: 0,
        },
        // 方法
        methods: {
            login: function () {
                alert('你好呀!')
            },
            register: function () {
                alert('注册成功!')
            },
            add: function (num) {
                // this 表示当前的vue. 通过this.total 来获取data中的变量
                this.total += num;
                alert(this.total)
            }
        }
    })
</script>
</html>